<template>
	<view class="">
		<view class="header-view">
			<view class="flex-justAliCenter-column">
				<view class="fontSize-30 fontWeight-bold margin-bottom10" style="color: #FF5733;">800</view>
				<view class="fontSize-13 color-000 margin-bottom20">当前余额</view>
				<view class="tixian-btn flex-center"
				@click="$tools.navigateTo('/pages/mine/mine-list/withdrawal')">提现</view>
			</view>
		</view>

		<view class="padding-30">
			<view class="flex-between margin-bottom30">
				<view class="flex-alignItems-center">
					<view class="chooseTab-item flex-justAliCenter-column" v-for="(item,index) in list" :key="index"
						:class="tabIndex ==index?'chooseTab-itemActive':''" @click="chooseTabindex(index)">
						{{item.name}}
						<view class="icon-line" v-if="tabIndex ==index"></view>
					    <view class="iocn-line1" v-else></view>
					</view>
				</view>
				<view class="flex-alignItems-center">
					<view class="fontSize-13 color-000 margin-right20">2025-03-01</view>
					<u-icon name="arrow-down" color="#333333" size="16"></u-icon>
				</view>
			</view>
			
			<view class="bg-fff padding-30 border-radius20 margin-bottom20">
				<view class="flex-between margin-bottom20">
					<view class="fontSize-13 color-999">编码：123231</view>
					<view class="fontSize-13 color-999">2024-01-03</view>
				</view>
				<view class="flex-between">
					<view class="fontSize-15" style="color: #2A82E4;">农药喷药</view>
					<view  class="fontSize-15" style="color: #FF9233;">350</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '全部'
					},
					{
						name: '收入'
					},
					{
						name: '支出'
					}
				],
				tabIndex: 0
			}
		},
		methods: {
			chooseTabindex(index) {
				this.tabIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.iocn-line1{
		width: 50rpx;
		height: 4rpx;
		margin-top: 10rpx;
	}
	.icon-line {
		width: 50rpx;
		height: 4rpx;
		margin-top: 10rpx;
		background-color: #333333;
	}

	.chooseTab-itemActive {
		color: #333333 !important;
	}

	.chooseTab-item {
		width: 100rpx;
		font-size: 15px;
		color: #808080;
	}

	.tixian-btn {
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		font-size: 13px;
		color: #ffffff;
		background-color: #FF5733;
	}

	.header-view {
		height: 240rpx;
		background: linear-gradient(to bottom, #FFB24F 0%, #FFDA6A 100%);
	}
</style>